<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>专题列表 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #333;
      padding-bottom: 70px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: #3498db;
      padding: 15px 15px;
      color: white;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .nav-btn {
      color: white;
      font-size: 20px;
    }
    
    /* 搜索栏 */
    .search-bar {
      padding: 12px 15px;
      background-color: white;
      position: sticky;
      top: 57px;
      z-index: 99;
      border-bottom: 1px solid #eee;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border: 1px solid #ddd;
      border-radius: 25px;
      font-size: 14px;
      outline: none;
      background: #f5f5f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat 15px center;
    }
    
    .search-input:focus {
      border-color: #3498db;
      background-color: white;
    }
    
    /* 分类标签 */
    .category-tabs {
      display: flex;
      overflow-x: auto;
      padding: 10px 15px;
      background-color: white;
      position: sticky;
      top: 115px;
      z-index: 98;
      border-bottom: 1px solid #eee;
      gap: 10px;
    }
    
    .category-tab {
      padding: 6px 15px;
      background-color: #f5f5f5;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .category-tab.active {
      background-color: #3498db;
      color: white;
    }
    
    /* 专题列表 */
    .topics-container {
      padding: 10px 15px;
    }
    
    .topic-item {
      background-color: white;
      border-radius: 10px;
      margin-bottom: 12px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: transform 0.2s ease;
    }
    
    .topic-item:hover {
      transform: translateY(-2px);
    }
    
    .topic-link {
      text-decoration: none;
      color: inherit;
      display: block;
    }
    
    /* 无图专题 */
    .topic-no-img {
      padding: 15px;
    }
    
    /* 单图专题 */
    .topic-single-img {
      display: flex;
      padding: 15px;
      gap: 15px;
    }
    
    .topic-single-img .topic-content {
      flex: 1;
    }
    
    .topic-single-img .topic-img {
      width: 100px;
      height: 100px;
      border-radius: 6px;
      object-fit: cover;
      flex-shrink: 0;
    }
    
    /* 多图专题 */
    .topic-multi-img {
      padding: 15px;
    }
    
    .multi-img-container {
      display: flex;
      gap: 5px;
      margin-top: 10px;
      height: 90px;
    }
    
    .multi-img-container img {
      flex: 1;
      height: 100%;
      border-radius: 6px;
      object-fit: cover;
    }
    
    /* 专题内容样式 */
    .topic-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 6px;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .topic-desc {
      font-size: 14px;
      color: #666;
      line-height: 1.4;
      margin-bottom: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .topic-meta {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #999;
      gap: 15px;
    }
    
    .topic-meta-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    .topic-category {
      display: inline-block;
      padding: 2px 8px;
      background-color: #f0f7ff;
      color: #3498db;
      border-radius: 4px;
      font-size: 12px;
      margin-right: 6px;
      margin-bottom: 6px;
    }
    
    /* 创建专题按钮 */
    .create-topic-btn {
      position: fixed;
      bottom: 80px;
      right: 20px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #3498db;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 3px 10px rgba(52, 152, 219, 0.4);
      border: none;
      cursor: pointer;
      z-index: 90;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 95;
    }
    
    .nav-link {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
      text-decoration: none;
    }
    
    .nav-link.active {
      color: #3498db;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 加载更多 */
    .load-more {
      text-align: center;
      padding: 15px 0;
      color: #3498db;
      font-size: 15px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav">
    <button class="btn btn-link p-0 nav-btn" onclick="history.back()">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">热门专题</h1>
    <button class="btn btn-link p-0 nav-btn">
      <i class="fa fa-cog"></i>
    </button>
  </div>
  
  <!-- 搜索栏 -->
  <div class="search-bar">
    <input type="text" class="search-input" placeholder="搜索专题...">
  </div>
  
  <!-- 分类标签 -->
  <div class="category-tabs">
    <div class="category-tab active">全部专题</div>
    <div class="category-tab">美食</div>
    <div class="category-tab">旅行</div>
    <div class="category-tab">科技</div>
    <div class="category-tab">娱乐</div>
    <div class="category-tab">体育</div>
    <div class="category-tab">健康</div>
    <div class="category-tab">教育</div>
  </div>
  
  <!-- 专题列表 -->
  <div class="topics-container">
    <!-- 无图专题 -->
    <div class="topic-item">
      <a href="#" class="topic-link">
        <div class="topic-no-img">
          <span class="topic-category">讨论</span>
          <h3 class="topic-title">2023年最值得关注的科技趋势有哪些？一起来预测未来发展</h3>
          <p class="topic-desc">随着人工智能、区块链、元宇宙等技术的快速发展，科技正在深刻改变我们的生活方式和社会结构...</p>
          <div class="topic-meta">
            <div class="topic-meta-item">
              <i class="fa fa-user-o"></i>
              <span>科技前沿</span>
            </div>
            <div class="topic-meta-item">
              <i class="fa fa-comment-o"></i>
              <span>328</span>
            </div>
            <div class="topic-meta-item">
              <i class="fa fa-eye"></i>
              <span>1.2k</span>
            </div>
            <div class="topic-meta-item">
              <i class="fa fa-heart-o"></i>
              <span>256</span>
            </div>
          </div>
        </div>
      </a>
    </div>
    
    <!-- 单图专题 -->
    <div class="topic-item">
      <a href="#" class="topic-link">
        <div class="topic-single-img">
          <div class="topic-content">
            <span class="topic-category">美食</span>
            <h3 class="topic-title">隐藏在城市角落的10家宝藏小吃店，本地人私藏推荐</h3>
            <p class="topic-desc">这些小店可能没有华丽的装修，但每一家都有自己的招牌美食，是真正的吃货才知道的好去处...</p>
            <div class="topic-meta">
              <div class="topic-meta-item">
                <i class="fa fa-user-o"></i>
                <span>城市味蕾</span>
              </div>
              <div class="topic-meta-item">
                <i class="fa fa-comment-o"></i>
                <span>156</span>
              </div>
              <div class="topic-meta-item">
                <i class="fa fa-heart-o"></i>
                <span>421</span>
              </div>
            </div>
          </div>
          <img src="https://picsum.photos/400/400?random=20" alt="美食专题图片" class="topic-img">
        </div>
      </a>
    </div>
    
    <!-- 多图专题 -->
    <div class="topic-item">
      <a href="#" class="topic-link">
        <div class="topic-multi-img">
          <span class="topic-category">旅行</span>
          <h3 class="topic-title">云南小众旅行地推荐，避开人潮享受真正的自然风光</h3>
          <p class="topic-desc">除了大理丽江，云南还有这些美丽的地方值得一去，每一处都能让你感受到不一样的民族风情和自然景观...</p>
          <div class="multi-img-container">
            <img src="https://picsum.photos/300/300?random=30" alt="旅行图片1">
            <img src="https://picsum.photos/300/300?random=31" alt="旅行图片2">
            <img src="https://picsum.photos/300/300?random=32" alt="旅行图片3">
          </div>
          <div class="topic-meta">
            <div class="topic-meta-item">
              <i class="fa fa-user-o"></i>
              <span>背包客小明</span>
            </div>
            <div class="topic-meta-item">
              <i class="fa fa-comment-o"></i>
              <span>215</span>
            </div>
            <div class="topic-meta-item">
              <i class="fa fa-eye"></i>
              <span>3.5k</span>
            </div>
            <div class="topic-meta-item">
              <i class="fa fa-heart-o"></i>
              <span>876</span>
            </div>
          </div>
        </div>
      </a>
    </div>
    
    <!-- 无图专题 -->
    <div class="topic-item">
      <a href="#" class="topic-link">
        <div class="topic-no-img">
          <span class="topic-category">健康</span>
          <h3 class="topic-title">办公室人群必备的5个健康习惯，简单有效改善亚健康状态</h3>
          <p class="topic-desc">长时间久坐、缺乏运动、饮食不规律是很多办公室工作者的通病，这些简单的习惯可以帮助你改善健康状况...</p>
          <div class="topic-meta">
            <div class="topic-meta-item">
              <i class="fa fa-user-o"></i>
              <span>健康管理师</span>
            </div>
            <div class="topic-meta-item">
              <i class="fa fa-comment-o"></i>
              <span>98</span>
            </div>
            <div class="topic-meta-item">
              <i class="fa fa-heart-o"></i>
              <span>320</span>
            </div>
          </div>
        </div>
      </a>
    </div>
    
    <!-- 单图专题 -->
    <div class="topic-item">
      <a href="#" class="topic-link">
        <div class="topic-single-img">
          <div class="topic-content">
            <span class="topic-category">娱乐</span>
            <h3 class="topic-title">年度最佳电影盘点，这些高分影片你看过几部？</h3>
            <p class="topic-desc">从剧情片到科幻片，从喜剧到纪录片，本年度有许多优秀的电影作品值得一看...</p>
            <div class="topic-meta">
              <div class="topic-meta-item">
                <i class="fa fa-user-o"></i>
                <span>影评人老王</span>
              </div>
              <div class="topic-meta-item">
                <i class="fa fa-comment-o"></i>
                <span>452</span>
              </div>
              <div class="topic-meta-item">
                <i class="fa fa-eye"></i>
                <span>5.2k</span>
              </div>
              <div class="topic-meta-item">
                <i class="fa fa-heart-o"></i>
                <span>1253</span>
              </div>
            </div>
          </div>
          <img src="https://picsum.photos/400/400?random=40" alt="电影专题图片" class="topic-img">
        </div>
      </a>
    </div>
    
    <!-- 多图专题 -->
    <div class="topic-item">
      <a href="#" class="topic-link">
        <div class="topic-multi-img">
          <span class="topic-category">体育</span>
          <h3 class="topic-title">奥运会精彩瞬间回顾，那些让人热血沸腾的夺冠时刻</h3>
          <p class="topic-desc">每届奥运会都会留下许多经典瞬间，运动员们的拼搏精神和爱国情怀让人感动...</p>
          <div class="multi-img-container">
            <img src="https://picsum.photos/300/300?random=50" alt="体育图片1">
            <img src="https://picsum.photos/300/300?random=51" alt="体育图片2">
            <img src="https://picsum.photos/300/300?random=52" alt="体育图片3">
            <img src="https://picsum.photos/300/300?random=53" alt="体育图片4">
          </div>
          <div class="topic-meta">
            <div class="topic-meta-item">
              <i class="fa fa-user-o"></i>
              <span>体育爱好者</span>
            </div>
            <div class="topic-meta-item">
              <i class="fa fa-comment-o"></i>
              <span>329</span>
            </div>
            <div class="topic-meta-item">
              <i class="fa fa-eye"></i>
              <span>4.8k</span>
            </div>
            <div class="topic-meta-item">
              <i class="fa fa-heart-o"></i>
              <span>1562</span>
            </div>
          </div>
        </div>
      </a>
    </div>
  </div>
  
  <!-- 加载更多 -->
  <div class="load-more" onclick="loadMoreTopics()">
    <i class="fa fa-spinner fa-spin"></i> 加载更多专题
  </div>
  
  <!-- 创建专题按钮 -->
  <button class="create-topic-btn">
    <i class="fa fa-plus"></i>
  </button>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-link">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-compass nav-icon"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-link active">
      <i class="fa fa-th-large nav-icon"></i>
      <span>专题</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-comments nav-icon"></i>
      <span>消息</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 分类标签切换
    document.querySelectorAll('.category-tab').forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有标签的活跃状态
        document.querySelectorAll('.category-tab').forEach(t => {
          t.classList.remove('active');
        });
        
        // 添加当前标签的活跃状态
        this.classList.add('active');
        
        // 滚动到顶部
        window.scrollTo({ top: 0, behavior: 'smooth' });
        
        // 模拟加载对应分类的专题
        const loadMoreEl = document.querySelector('.load-more');
        loadMoreEl.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载中...';
        
        setTimeout(() => {
          loadMoreEl.innerHTML = '加载更多专题';
        }, 1000);
      });
    });
    
    // 加载更多专题
    function loadMoreTopics() {
      const loadMoreEl = document.querySelector('.load-more');
      loadMoreEl.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载中...';
      
      // 模拟加载延迟
      setTimeout(() => {
        const topicsContainer = document.querySelector('.topics-container');
        
        // 添加新专题（随机选择一种类型）
        const topicTypes = ['no-img', 'single-img', 'multi-img'];
        const randomType = topicTypes[Math.floor(Math.random() * topicTypes.length)];
        
        let newTopic = '';
        
        if (randomType === 'no-img') {
          newTopic = `
            <div class="topic-item">
              <a href="#" class="topic-link">
                <div class="topic-no-img">
                  <span class="topic-category">教育</span>
                  <h3 class="topic-title">在线学习平台对比，哪款更适合自学编程？</h3>
                  <p class="topic-desc">随着编程学习的普及，各种在线学习平台层出不穷，本文将从课程质量、价格、学习体验等方面进行对比...</p>
                  <div class="topic-meta">
                    <div class="topic-meta-item">
                      <i class="fa fa-user-o"></i>
                      <span>编程导师</span>
                    </div>
                    <div class="topic-meta-item">
                      <i class="fa fa-comment-o"></i>
                      <span>78</span>
                    </div>
                    <div class="topic-meta-item">
                      <i class="fa fa-eye"></i>
                      <span>956</span>
                    </div>
                    <div class="topic-meta-item">
                      <i class="fa fa-heart-o"></i>
                      <span>210</span>
                    </div>
                  </div>
                </div>
              </a>
            </div>
          `;
        } else if (randomType === 'single-img') {
          newTopic = `
            <div class="topic-item">
              <a href="#" class="topic-link">
                <div class="topic-single-img">
                  <div class="topic-content">
                    <span class="topic-category">美食</span>
                    <h3 class="topic-title">在家也能做的网红甜点，简单易学零失败</h3>
                    <p class="topic-desc">不需要专业设备，在家就能做出媲美甜品店的美味甜点，新手也能轻松掌握...</p>
                    <div class="topic-meta">
                      <div class="topic-meta-item">
                        <i class="fa fa-user-o"></i>
                        <span>甜点师Lily</span>
                      </div>
                      <div class="topic-meta-item">
                        <i class="fa fa-comment-o"></i>
                        <span>124</span>
                      </div>
                      <div class="topic-meta-item">
                        <i class="fa fa-heart-o"></i>
                        <span>356</span>
                      </div>
                    </div>
                  </div>
                  <img src="https://picsum.photos/400/400?random=${Math.floor(Math.random() * 100)}" alt="甜点图片" class="topic-img">
                </div>
              </a>
            </div>
          `;
        } else {
          newTopic = `
            <div class="topic-item">
              <a href="#" class="topic-link">
                <div class="topic-multi-img">
                  <span class="topic-category">旅行</span>
                  <h3 class="topic-title">日本关西小众景点推荐，深度体验当地文化</h3>
                  <p class="topic-desc">除了大阪京都，关西地区还有这些值得一去的地方，让你避开游客，体验更地道的日本风情...</p>
                  <div class="multi-img-container">
                    <img src="https://picsum.photos/300/300?random=${Math.floor(Math.random() * 100)}" alt="日本景点1">
                    <img src="https://picsum.photos/300/300?random=${Math.floor(Math.random() * 100)}" alt="日本景点2">
                    <img src="https://picsum.photos/300/300?random=${Math.floor(Math.random() * 100)}" alt="日本景点3">
                  </div>
                  <div class="topic-meta">
                    <div class="topic-meta-item">
                      <i class="fa fa-user-o"></i>
                      <span>环球旅行者</span>
                    </div>
                    <div class="topic-meta-item">
                      <i class="fa fa-comment-o"></i>
                      <span>187</span>
                    </div>
                    <div class="topic-meta-item">
                      <i class="fa fa-eye"></i>
                      <span>2.7k</span>
                    </div>
                    <div class="topic-meta-item">
                      <i class="fa fa-heart-o"></i>
                      <span>643</span>
                    </div>
                  </div>
                </div>
              </a>
            </div>
          `;
        }
        
        topicsContainer.insertAdjacentHTML('beforeend', newTopic);
        loadMoreEl.innerHTML = '加载更多专题';
      }, 1500);
    }
    
    // 创建专题按钮点击事件
    document.querySelector('.create-topic-btn').addEventListener('click', function() {
      alert('创建专题功能即将上线，敬请期待！');
    });
    
    // 搜索功能
    document.querySelector('.search-input').addEventListener('keypress', function(e) {
      if (e.key === 'Enter') {
        const searchText = this.value.trim();
        if (searchText) {
          alert(`正在搜索专题: ${searchText}`);
        }
      }
    });
  </script>
</body>
</html>
